<template>
  <basic-container>
    <el-form ref="form" :model="formInline" label-width="150px" style="width:70%;" :rules="rules">
      <h3>{{formInline.tenantName}}</h3>
      <el-row>
        <el-col :span="12">
          <el-form-item label="公司名称">
            <el-input v-model="formInline.tenantName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="中文品牌">
            <el-input v-model="formInline.chiBrand"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="英文品牌">
            <el-input v-model="formInline.engBrand"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="商户类型">
            <el-select v-model="formInline.tenantType" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="主题类型">
        <el-select v-model="formInline.themeType" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户成功经理">
            <!-- <el-input v-model="formInline.manager.name"></el-input> -->
            <el-select v-model="formInline.customerManager" placeholder="请选择">
              <el-option
                v-for="item in managerList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户成功经理手机">
            <el-input v-model="formInline.manager.phone" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户成功经理微信">
            <el-input v-model="formInline.manager.wechat" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户成功经理QQ">
            <el-input v-model="formInline.manager.qq" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="营业执照">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="formInline.licenseUrl" :src="formInline.licenseUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="办学许可证">
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="formInline.permitUrl" :src="formInline.permitUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="地区地址">
        <v-distpicker
          :province="formInline.provice"
          :city="formInline.city"
          :area="formInline.area"
          @selected="onSelected"
        ></v-distpicker>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="formInline.address" placeholder="请输入详细地址"></el-input>
      </el-form-item>
      <el-form-item>
        <baidu-map class="map" :center="circlePath.center" :zoom="15" :scroll-wheel-zoom="true">
          <bm-circle
            :center="circlePath.center"
            :radius="circlePath.radius"
            stroke-color="blue"
            :stroke-opacity="0.5"
            :stroke-weight="2"
            @lineupdate="updateCirclePath"
          ></bm-circle>
          <!-- :editing="true" -->
          <bm-control :offset="{width: '10px', height: '10px'}">
            <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}">
              <el-input
                v-model="keyword"
                placeholder="请输入门店详细地址,越详细越精确"
                size="small"
                class="input-with-select"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
              <!-- 这里指代一个自定义搜索框组件 -->
            </bm-auto-complete>
          </bm-control>
          <bm-local-search :keyword="keyword" :auto-viewport="true"></bm-local-search>
        </baidu-map>
      </el-form-item>

      <!-- <el-form-item label="活动海报">
        <el-upload
          class="avatar-uploader"
          action="api/updateFile/uploadFilePhoto"
          :show-file-list="true"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :http-request="submitImage"
          :headers="headers"
          :data="submitData"
          multiple
        >
          <el-button size="small">点击上传</el-button>
        </el-upload>
      </el-form-item>-->

      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button @click="$router.push({path: '/vcustom/getOneTenant'})">取消</el-button>
      </el-form-item>
    </el-form>
  </basic-container>
</template>

<script>
import { getOneTenantData, editTenant, getManagerList } from "@/api/dept/user";
import { mapGetters } from "vuex";
import { getToken } from "@/util/auth";
import VDistpicker from "v-distpicker";
export default {
  components: { VDistpicker },
  data() {
    return {
      formInline: {
        tenantName: "",
        chiBrand: "",
        engBrand: "",
        provice: "",
        address: "",
        area: "",
        city: "",
        contactNumber: "",
        name: "",
        phone: "",
        qq: "",
        wechat: "",
        permitUrl: "",
        tenantType: "",
        themeType: "",

        logo: "",
        lag: "",
        lon: "",
        scope: ""
      },
      submitData: {
        type: 4
      },
      rules: {
        tenantName: [
          { required: true, message: "请输入活动名称", trigger: "blur" }
        ]
      },
      circlePath: {
        center: {
          lng: 116.403765,
          lat: 39.91485
        },
        radius: 0
      },

      options1: [
        {
          value: "1",
          label: "知识店铺"
        },
        {
          value: "2",
          label: "培训机构"
        },
        {
          value: "3",
          label: "学校"
        }
      ],
      options2: [
        {
          value: "1",
          label: "政府部门事业单位"
        },
        {
          value: "2",
          label: "企业"
        },
        {
          value: "3",
          label: "个人"
        }
      ],
      managerList: [],
      keyword: "",
      tenantId: ""
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    //  获取详情
    getInfo() {
      this.tenantId = this.$route.query.id;
      getOneTenantData({ tenantid: this.tenantId }).then(res => {
        this.formInline = res.data.data;
        this.circlePath.center.lng = this.formInline.x;
        this.circlePath.center.lat = this.formInline.y;
        this.formInline.customerManager = this.formInline.manager.id;
        this.getManagerListFn();
      });
    },
    onSelected(data) {
      this.formInline.provice = data.province.value;
      this.formInline.city = data.city.value;
    },
    updateCirclePath(e) {
      this.circlePath.center = e.target.getCenter();
    },

    submitImage(content) {
      let formData = new FormData();
      formData.append("file", content.file);
      formData.append("type", 1);
      uploadFilePhoto(formData).then(res => {
        console.log(res);
      });
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      if (res.code != 200) {
        this.$message({
          message: res.msg,
          type: "error"
        });
      } else {
        this.$message({
          message: res.msg,
          type: "success"
        });
        this.onLoad(this.page);
      }
    },
    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
      const extension = testmsg === "png";
      const extension2 = testmsg === "jpg";
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (!extension && !extension2) {
        this.$message({
          message: "上传文件只能是 xls、xlsx格式!",
          type: "error"
        });
      }
      if (!isLt2M) {
        this.$message({
          message: "上传文件大小不能超过 5MB!",
          type: "error"
        });
      }
      return extension || (extension2 && isLt2M);
    },

    // 获取经理列表
    getManagerListFn() {
      getManagerList().then(res => {
        res.data.data.forEach((item, index) => {
          this.managerList.push({
            value: item.id,
            label: item.name
          });
        });
      });
    },

    onSubmit() {
      let datas = JSON.parse(JSON.stringify(this.formInline));
      let param = {
        id: Number(datas.id),
        tenantName: datas.tenantName,
        chiBrand: datas.chiBrand,
        engBrand: datas.engBrand,
        licenseId: datas.licenseId,
        permitId: datas.permitId,
        tenantType: datas.tenantType,
        themeType: datas.themeType,
        customerManager: datas.customerManager,
        provice: datas.provice,
        city: datas.city,
        area: datas.area,
        address: datas.address,
        x: datas.x,
        y: datas.y
      };

      editTenant(param).then(res => {
        this.$message({
          message: "操作成功",
          type: "success"
        });
        this.$router.push({ path: "/vcustom/getOneTenant" });
      });
    }
  }
};
</script>

<style>
.map {
  width: 700px;
  height: 300px;
  overflow: hidden;
}

.el-form-item .el-select {
  width: 100%;
}

.el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.input-with-select {
  margin-left: 150px;
  margin-top: 10px;
}

.el-input-group__append {
  background: #009688;
  color: #fff;
}
</style>
